<template>
  <div class="storeDetail">
    <img class="top_img" src="@/assets/images/rader/moneyicon.png" alt="" />
    <div class="detail">
      <p class="money">+{{detail.brokerage}}</p>
      <span class="getmoney">获得佣金</span>
      <ul style="margin-top: 30px">
        <li class="label-text">
          <label>套餐名称：</label>
          <span>{{detail.tcName}}</span>
        </li>
        <li class="label-text">
          <label>门店名称：</label>
          <span>{{detail.shopName}}</span>
        </li>
        <li class="label-text">
          <label>地市区县：</label>
          <span>{{detail.cityName+detail.countyName}}</span>
        </li>
        <li class="label-text">
          <label>订 &nbsp;单 &nbsp;号：</label>
          <span>{{detail.orderNo}}</span>
        </li>
        <li class="label-text">
          <label>手机号码：</label>
          <span>{{detail.orderDn}}</span>
        </li>
        <li class="label-text">
          <label>订购日期：</label>
          <span>{{detail.orderTime}}</span>
        </li>
        <li class="label-text">
          <label>订单来源：</label>
          <span>{{lis[detail.origin]}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import http from './service/service'
export default {
  name: 'storeDetail',
  data () {
    return {
      id: null,
      detail: {},
      lis: ['门店', '营业员', '个人']
    }
  },
  methods: {
    getlist () {
      console.log('s')
      http.getOrderNumDetail({ id: this.id }).then((res) => {
        if (res.data.ret === 0) {
          this.detail = res.data.data
        } else {
          this.$toast.fail('网络错误')
        }
      })
    }
  },
  created () {
    this.id = this.$route.query.id
    this.getlist()
  }
}
</script>

<style lang="less" scoped>
.storeDetail {
  font-family: PingFangSC-Medium, PingFang SC;
  padding: 50px 15px 0;
  position: relative;
  .detail {
    background-color: #ffffff;
    height: 70vh;
    padding-top: 33px;
    text-align: center;
    color: #333333;
    .label-text {
      text-align: left;
      height: 40px;
      line-height: 40px;
      label {
        font-size: 14px;
        margin: 0 10px 0 15px;
        color: #666666;
      }
      span {
        font-size: 14px;

        color: #333333;
      }
    }
    .money {
      font-size: 30px;
      margin-bottom: 5px;
      font-weight: 500;
    }
    .getmoney {
      font-size: 12px;
    }
  }
  .top_img {
    position: absolute;
    width: 58px;
    height: 58px;
    top: 20px;
    left: calc(50vw - 29px);
  }
}
</style>
